<template>
  <div class="home">
    <!--图书列表-->

    <!--搜索区域-->
    <form action="/">
      <van-search
        v-model="searchWord"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!--数据加载时显示 骨架屏 重复显示8个骨架屏-->
    <div v-show="loading">
      <div
        v-for="num in 8"
        :key="num"
      >
        <van-skeleton
          title
          avatar
          avatar-size="100px"
          avatar-shape="square"
          :row="2"
        />
        <br>
      </div>
    </div>

    <transition name="fade">
      <div v-show="!loading">

        <!--卡片区域-->
        <van-card
          v-for="book in list"
          :key="book.id"
          :num="book.num"
          :price="book.price"
          :desc="book.desc"
          :title="book.title"
          :thumb="book.picture"
          @click="goTo('/page/detail/'+book.id)"
        />

      </div>
    </transition>

  </div>

</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "Home",
  computed: {
    ...mapState(["booklist", "searchlist"])
  },
  data() {
    return {
      loading: false, // 数据加载标识
      searchWord: "",
      list: []
    };
  },
  methods: {
    ...mapActions(["GET_BOOKLIST"]),
    ...mapMutations(["searchBook"]),

    onSearch() {
      this.searchBook(this.searchWord);
      this.list = this.searchlist;
    },

    onCancel() {
      this.searchWord = "";
      this.list = this.booklist;
    },

    goTo(url) {
      this.$router.push(url);
    }
  },
  created() {
    // 数据开始加载

    this.loading = true;
    // 使用mapActions 映射的方法可以直接调用
    this.GET_BOOKLIST()
      .then(() => {
        this.list = this.booklist;
      })
      .finally(() => {
        this.loading = false;
      });
  }
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
